<template>
  <AdminLayout>
    <el-card class="create-exam-card">
    <template #header>
      <div class="card-header">
        <span>创建考试</span>
      </div>
    </template>
      <el-form :model="examForm" :rules="rules" ref="examFormRef" label-width="120px">
        <el-form-item label="考试名称" prop="examName">
          <el-input v-model="examForm.examName" placeholder="请输入考试名称" />
        </el-form-item>
        <el-form-item label="所属课程" prop="courseId">
          <el-select v-model="examForm.courseId" placeholder="请选择课程">
            <el-option label="高等数学" value="1"></el-option>
            <el-option label="线性代数" value="2"></el-option>
            <el-option label="概率论" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试时长" prop="duration">
          <el-input-number v-model="examForm.duration" :min="5" :max="300" style="width: 100%" />
          <div class="form-hint">单位：分钟</div>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="examForm.startTime" type="datetime" placeholder="选择开始时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="examForm.endTime" type="datetime" placeholder="选择结束时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="总分" prop="totalScore">
          <el-input-number v-model="examForm.totalScore" :min="10" :max="500" style="width: 100%" />
        </el-form-item>
        <el-form-item label="考试说明" prop="description">
          <el-input v-model="examForm.description" type="textarea" :rows="4" placeholder="请输入考试说明" />
        </el-form-item>
        <el-form-item label="参与班级" prop="classIds">
          <el-select v-model="examForm.classIds" multiple placeholder="请选择参与班级">
            <el-option label="计算机一班" value="1"></el-option>
            <el-option label="计算机二班" value="2"></el-option>
            <el-option label="数学一班" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="examForm.status" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
      </el-card>
    </AdminLayout>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import TeacherLayout from '../../components/teacher/TeacherLayout.vue'
import AdminLayout from '../../components/admin/AdminLayout.vue'

const router = useRouter()
const examFormRef = ref()

const examForm = reactive({
  examName: '',
  courseId: '',
  duration: 90,
  startTime: '',
  endTime: '',
  totalScore: 100,
  description: '',
  classIds: [],
  status: true
})

const rules = {
  examName: [
    { required: true, message: '请输入考试名称', trigger: 'blur' },
    { min: 2, max: 100, message: '考试名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  courseId: [
    { required: true, message: '请选择所属课程', trigger: 'change' }
  ],
  duration: [
    { required: true, message: '请输入考试时长', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ],
  totalScore: [
    { required: true, message: '请输入总分', trigger: 'blur' }
  ],
  classIds: [
    { required: true, message: '请选择参与班级', trigger: 'change' }
  ]
}

const handleSubmit = async () => {
  try {
    // 表单验证
    await examFormRef.value.validate()
    
    // 检查时间逻辑
    if (new Date(examForm.startTime) >= new Date(examForm.endTime)) {
      ElMessage.error('开始时间必须小于结束时间')
      return
    }
    
    // 模拟创建考试请求（实际项目中应调用API）
    ElMessage.success('考试创建成功')
    // 跳转回考试列表页面
    router.push('/teacher/exam/list')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleCancel = () => {
  router.back()
}
</script>

<style scoped>
.create-exam-card {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.form-hint {
  margin-top: 5px;
  color: #909399;
  font-size: 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .create-exam-card {
    margin: 10px;
  }
}
</style>